<!--The content below is only a placeholder and can be replaced.-->
 <div class="chat">
  <!-- <input type="button" onclick="disp_prompt()" value="显示一个提示框" /> -->
  <!-- 左侧列表 -->
  <div class="sidebar">
    <div class="m-card">
        <header>
            <img class="avatar" width="40" height="40" src="/assets/images/3.jpg">
            <p class="name">{{selfData.clientName}}</p>
        </header>
        <footer>
            <input class="search" type="text" placeholder="search user...">
        </footer>
    </div>
    <div class="m-tab">
        <div class="tab_item">
            <a class="chat" title="聊天" href="#">聊天</a>
        </div>
        <div class="tab_item">
            <a class="chat" title="通讯录" href="#">通讯录</a>
        </div>
        <div class="tab_item">
            <a class="chat" title="收藏" href="#">收藏</a>
        </div>
    </div>

    <div class="m-list">
      <ul>
          <li *ngFor="let item of userList" [ngClass]="item.clientId == targetSelectData.clientId ? 'active' : ''" (click)="select(item)">
              <img class="avatar" width="30" height="30" [alt]="item.clientId" src="/assets/images/1.jpg">
              <p class="name" [ngClass]="!item.online?'gray':''">{{item.clientName}}</p>
          </li>
      </ul>
    </div>
  </div>
  <!-- 右侧 -->
  <div class="main">
      <div class="chat-with" *ngIf="targetSelectData.sessionId">与 {{ targetSelectData.clientName }} 聊天中</div>
    <div class="m-message" id="message-con">
      
      <ul>
          <li *ngFor="let item of messagesList | filterMessage:targetSelectData.clientId">
              <p class="time"><span>{{ item.date | date:'HH:mm:ss' }}</span></p>
              <div class="main" [ngClass]="item.self ? 'self' : ''">
                  <img class="avatar" width="30" height="30" [src]="item.img" />
                  <div class="text">{{ item.msg }}</div>
              </div>
          </li>
      </ul>
    </div>
    <!-- 发送消息 -->
    <div class="m-text">
    <!-- <pre class="edit-area"></pre> -->
      <!-- <textarea name="message" placeholder="按 Enter 发送" #message></textarea> -->
      <input type="text" placeholder="发送消息" [(ngModel)]="Inputmessage" (keyup)="sendMsFn($event,Inputmessage)">
      <!-- <button (click)="sendMsFn(Inputmessage)">发 送</button> -->
    </div>
  </div>
 </div>

